<template>
  <div id="app">
    <Transition name="slide-fade">
    <router-view />
    </Transition>
    <div class="iconBottom" id="drag" v-show="this.flag">
      <van-icon name="envelop-o" @touchmove="move" @click="go" />
    </div>
    <!-- <van-tabbar route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="course">课程</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="record">约课记录</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="practice">练习</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="my">我的</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    move(e) {
      e.preventDefault(); //阻止-默认事件 修复bug 移动图标时 页面发生移动
      // console.log(e.touches);
      let x = e.touches[0].clientX;
      let y = e.touches[0].clientY;
      // console.log(document.body.clientWidth, document.body.clientHeight);
      if (
        x > 50 &&
        x < document.body.clientWidth - 50 &&
        y > 50 &&
        y < document.body.clientHeight - 50
      ) {
        var drag = document.getElementById("drag");
        drag.style.top = y - 50 + "px";
        drag.style.left = x - 50 + "px";
      }
    },
    go() {
      this.$router.push("custmoer");
    },
  },
  watch: {
    $route(n) {
      // console.log(n.path);
      if (n.path == "/custmoer") {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
  },
};
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
#app {
  width: 100%;
  height: 100vh;
  // background-color: #f2f3f5;
}
.iconBottom {
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 45px;
  border-radius: 50%;
  color: white;
  text-align: center;
  background-color: #007aff;
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 100;
}
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
